<template>
  <div class="student-body box_bg">
    <h2 class="box_tit">
      <i class="icon icon1"></i>职业发展活动查看
      <i class="reti"></i>
    </h2>
    <el-form  v-model="ruleForm" :rules="rules" ref="ruleForm"  label-width="100px">
      <el-row>
        <el-col :span="4">
          <el-form-item label="院校" prop="schoolId">
            <el-select @change="schoolChange(ruleForm.schoolId)" v-model="ruleForm.schoolId" placeholder="请选择">
              <el-option v-for="school in schoolData" :label="school.text" :value="school.id" :key="school.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="二级院校" prop="secondSchoolId">
            <el-select @change="secondSchoolChange(ruleForm.secondSchoolId)" placeholder="请选择" v-model="ruleForm.secondSchoolId">
              <el-option v-for="secondSchool in secondSchoolData" :label="secondSchool.text" :value="secondSchool.id" :key="secondSchool.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <el-form-item label="专业" prop="professionId">
            <el-select @change="professionChange" placeholder="请选择" v-model="ruleForm.professionId">
              <el-option v-for="profession in professionData" :key="profession.id" :label="profession.text" :value="profession.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="记录人" prop="recorder">
            <el-input v-model="ruleForm.recorder"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="班级" prop="classId">
            <el-select placeholder="请选择" v-model="ruleForm.classId" multiple>
              <el-option v-for="schoolClass in classData" :label="schoolClass.text" :value="schoolClass.id" :key="schoolClass.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="职业发展计划" prop="planId">
            <el-select @change="careerChange(ruleForm.planId)" placeholder="请选择" v-model="ruleForm.planId">
              <el-option v-for="careerPlan in careerPlanData" :label="careerPlan.semester+careerPlan.schoolName+careerPlan.secondSchoolName+careerPlan.professionName" :value="careerPlan.id" :key="careerPlan.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="周计划" prop="detailId">
            <el-select placeholder="请选择" v-model="ruleForm.detailId">
              <el-option v-for="week in weekPlanData" :label="'第'+week.teachWeek+'周-'+week.supportPoint" :value="week.id" :key="week.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <el-form-item label="活动类型" prop="type">
            <el-select placeholder="请选择" v-model="ruleForm.type">
              <el-option  v-for="actType in actTypeData" :key="actType.value" :label="actType.label" :value="actType.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="活动日期" prop="actTime">
            <el-date-picker
              align="right"
              type="date"
              placeholder="选择日期" v-model="ruleForm.actTime">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="活动地点" prop="actSite">
            <el-input v-model="ruleForm.actSite"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="主题" prop="subject">
            <el-input type="textarea" v-model="ruleForm.subject" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="参会人员" prop="attendee">
            <el-input type="textarea" v-model="ruleForm.attendee" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="缺席人员" prop="absentee">
            <el-input type="textarea" v-model="ruleForm.absentee" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="活动内容" prop="content">
            <el-input type="textarea" v-model="ruleForm.content" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="活动决议" prop="result">
            <el-input type="textarea" v-model="ruleForm.result" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button @click="returnMainPage('ruleForm')">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        schoolData:[],//院校下拉框
        secondSchoolData:[], //二级院校下拉框
        professionData:[],//专业下拉框
        gradeData:[],//年级下拉框
        classData:[],//班级下拉框，
        careerPlanData:[], //职业发展计划下拉框
        weekPlanData:[],//周计划下拉框
        actTypeData:[],//活动类型下拉框
        ruleForm:{
          id:null,
          schoolId:null,
          secondSchoolId:null,
          professionId:null,
          classId:null,
          planId:null,
          detailId:null,
          type:null,
          actTime:null,
          actSite:null,
          subject:null,
          attendee:null,
          absentee:null,
          content:null,
          result:null,
          recorder:null
        },
        rules: {}
      }
    },
    created(){
      let self = this;
      let id = self.$route.params.id;
      //根据ID获得职业发展活动信息
      self.axios({
        method:"get",
        url:api.getCareerDevelopmentById+id
      }).then(function(response){
        let data = response.data.data;
        self.ruleForm = data;
        self.axios.all([
          self.axios({//获得院校
            method:"get",
            url:api.getSchoolList
          }),
          self.axios({//获得二级院校
            method:"get",
            url:api.getSecondSchoolList,
            params:{
              schoolId:self.ruleForm.schoolId
            }
          }),
          self.axios({//获得专业
            method:"get",
            url:api.getProfeesionList,
            params:{
              secondSchoolId:self.ruleForm.secondSchoolId
            }
          }),
          self.axios({//获得班级
            method:"get",
            url:api.getClassList,
            params:{
              professionId:self.ruleForm.professionId
            }
          }),
          self.axios({//获得职业发展计划
            method:"get",
            url:api.careerDevelopment,
            params:{
              pageSize:100,
              pageNum:1,
              schoolId:self.ruleForm.schoolId,
              secondSchoolId:self.ruleForm.secondSchoolId,
              professionId:self.ruleForm.professionId
            }
          }),
          self.axios({//获得职业发展周计划
            method:"get",
            url:api.careerDevelopmentDetail+"/"+self.ruleForm.planId,
          })
        ]).then(self.axios.spread(function(schoolData,secondSchoolData,professionData,classData,careerData,weekPlanData){
          self.schoolData = schoolData.data.data;
          self.secondSchoolData = secondSchoolData.data.data;
          self.professionData = professionData.data.data;
          self.classData = classData.data.data;
          self.careerPlanData = careerData.data.data.list;
          self.weekPlanData = weekPlanData.data.data;
        }));
      });





      self.axios({//获得活动类型
        method:"get",
        url:api.dictsTypesSubListUrl,
        params:{
          type:'career_act_type'
        }
      }).then(function(response){
        self.actTypeData = response.data.data;
      });
    },
    methods:{
      schoolChange:function(id){
        let self = this;
        self.axios({//获得二级院校
          method:"get",
          url:api.getSecondSchoolList,
          params:{
            schoolId:id
          }
        }).then(function(response){
          self.ruleForm.secondSchoolId = null;
          self.secondSchoolData = [];

          self.ruleForm.professionId = null;
          self.professionData = [];

          self.ruleForm.classId = [];
          self.classData = [];

          self.ruleForm.planId = null;
          self.careerPlanData = [];

          self.ruleForm.detailId = null;
          self.weekPlanData = [];
          self.secondSchoolData = response.data.data;
        });
      },
      secondSchoolChange:function(id){
        let self  = this;
        self.axios({//获得专业
          method:"get",
          url:api.getProfeesionList,
          params:{
            secondSchoolId:id
          }
        }).then(function(response){
          self.ruleForm.professionId = null;
          self.professionData = [];

          self.ruleForm.classId = [];
          self.classData = [];

          self.ruleForm.planId = null;
          self.careerPlanData = [];

          self.ruleForm.detailId = null;
          self.weekPlanData = [];
          self.professionData = response.data.data
        });
      },
      professionChange:function(id){
        let self = this;
        self.axios.all([self.axios({//获得班级
          method:"get",
          url:api.getClassList,
          params:{
            professionId:id
          }
        }),self.axios({//获得职业发展计划
          method:"get",
          url:api.careerDevelopment,
          params:{
            pageSize:20,
            pageNum:1,
            schoolId:self.ruleForm.schoolId,
            secondSchoolId:self.ruleForm.secondSchoolId,
            professionId:id
          }
        })]).then(self.axios.spread(function (classResponse, careerResponse) {
          self.ruleForm.classId = [];
          self.classData = [];

          self.ruleForm.planId = null;
          self.careerPlanData = [];

          self.ruleForm.detailId = null;
          self.weekPlanData = [];
          self.classData = classResponse.data.data;
          self.careerPlanData = careerResponse.data.data.list;

        }));
      },
      careerChange:function(){
        let self = this;
        self.axios({//获得职业发展计划
          method:"get",
          url:api.careerDevelopmentDetail+"/"+self.ruleForm.planId,
        }).then(function(response){
          self.ruleForm.detailId = null;
          self.weekPlanData  = response.data.data;
          console.log(self.ruleForm);
        });
      },
      returnMainPage:function(){
        this.$router.push({
          path:'/career/index'
        })
      },
      submitForm:function(){
        let self = this;
        this.axios({
          method:"PUT",
          url:api.updateCareerDevelopmentAct+self.ruleForm.id,
          data: self.ruleForm
        }).then(function(response){
          let flag = response.data.success;
          if(flag){
            self.$router.push({
              path:'/career/index'
            })
          }else{

          }
        });
      },
      resetForm:function(formName){
        this.$refs[formName].resetFields();
      }

    }
  }
</script>
<style scoped>
  .demo-ruleForm{
    width:1000px;
  }
  .student-body {
    min-height: 545px;
    width: 100%;
    background: #fff;
    border-radius: 4px;
    padding: 15px;
  }
  .student-body .contents span {
    display: inline-block;
    width: 100px;
    margin-top: 10px;
    text-align: right;
  }
  .student-body .contents .spanInput {
    height: 26px;
    width: 206px;
    line-height: 26px;
    font-size: 12px;
    color: #cdcdcd;
    text-indent: 5px;
    border-radius: 15px;
    border: 1px solid #cdcdcd;
    box-sizing: border-box;
    outline: none;
  }

  .student-body .contents .sexSpan {
    width: 20px;
    padding-left: 20px;
  }
  .student-body .contents .sexSpans{
    width: 50px;
  }
  .student-body .contents .lableInput {
    position: absolute;
    top: 12px;
    left: 105px;
  }
  .student-body .contents
  .student-body .reti {
    width: 94px;
  }
  .student-body .inputs {
    width: 100%;
    height: 40px;
    padding-top: 20px;
  }
  .student-body .inputs > span {
    font-size: 12px;
    color: #333;
    padding-left: 1px;
  }

  .box_tit {
    border-bottom: 1px solid #e6e8ec;
    position: relative;
    padding: 4px 0 10px 30px;
    margin-top: 0;
    font-weight: bold;
    line-height: 16px;
  }

  .el-select {
    width: 100%;
  }
  .el-date-editor{
    width: 100%;
  }
  .el-input__inner{
    width: 100%;
  }
</style>
